<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
</head>
<style>
    html{
        font-size: 12px;
    }
    * {
        padding: 0;
        margin: 0;
        user-select: none;
        box-sizing: border-box;
    }
    a {
        text-decoration: none;
        color: rgb(243, 238, 238);
    }
    
    body {
        display: flex;
        justify-content: center;
        align-self: center;
        height: 100vh;
        overflow: hidden;
        background-color: rgb(47, 45, 45);
        font-family: "Arial Rounded MT Bold", Arial, sans-serif;
    }
    /*全局：按钮基本样式*/
    button {
        outline: 0;
        width: 100px;
        height: 40px;
        /* color: #409eff; */
        /* border-radius: 4px;
        border: 1px solid #b3d8ff;
        background-color: #ecf5ff; */
        
        /* transform: all 0.3s; */
        /*光标样式变：手指*/
        cursor: pointer;
    }

    /*按钮预选中时 */
    button:hover {
        color: #fff;
        border-color: #409eff;
        background-color: #409eff;
    }


    /*模态框部分*/

    /*添加部分*/
    .add_model_box {
        /*隐藏模态框*/
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.45);
    }
    
    .add_model_box .content {
        position: absolute;
        top: 25%;
        left: calc(50% - 210px);
        width: 420px;
        border-radius: 5px;
        height: 350px;
        padding: 0 20px;
        /* 盒子阴影 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        background-color: rgb(183, 127, 127);
    }
    .add_model_box .content .title {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        line-height: 60px;
    }

    .add_model_box .content .title .close:hover {
        color: #ffffff;
    }
    
    /* .add_model_box .content form .form_inputWord{
        margin: 20px 0;
    } */
    
    .add_model_box .content form .form_inputWord input{ 
        outline: 0;
        width: 100%;
        height: 42px;
        padding: 0 15px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #4f4b4b;
        background-color: #6a6464;
        color: #fff;
    }
    .add_model_box .content form .sameStyle {
        display: flex;
        justify-content: space-between;
    }

    .add_model_box .content form .sameStyle .form_input_translate input{ 
        outline: 0;
        height: 42px;
        padding: 0 15px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #4f4b4b;
        background-color: #6a6464;
        color: #fff;
    }

    .add_model_box .content form .sameStyle .form_input_type select {
        height: 42px;
        padding: 0 50px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #4f4b4b;
        background-color: #6a6464;
        color: #fff;
    }
    #selectType option:first-child{
        color: gray;
    }

    .add_model_box .content form .form_input_detail input{
        outline: 0;
        width: 100%;
        height: 42px;
        padding: 0 15px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #4f4b4b;
        background-color: #6a6464;
        color: #fff;
    }

    .add_model_box .content .form_input button{
        float: right;
        margin-top: 10px;
        color: rgb(29, 107, 44);
        background-color: rgb(25,200,58);
        border: 1px solid rgb(29, 107, 44);
    }
    .add_model_box .content .form_input button:hover {
        color: #3ab62a;
        background-color: rgb(29, 107, 44);
    }
    
    
    

    /*删除部分*/
    .del_model_box {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.45);
    }

    .del_model_box .del_content {
        position: absolute;
        top: 25%;
        left: calc(50% - 210px);
        width: 420px;
        border-radius: 5px;
        height: 250px;
        padding: 0 20px;
        /* 盒子阴影 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        background-color: rgb(183, 127, 127);
    }
    
    .del_model_box .del_content .del_title {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        line-height: 60px;
    }
    
    .del_model_box .del_content .del_title .del_close:hover {
        color: #ffffff;
    }

    .del_model_box .del_content .del_prompt {
        display: flex;
        justify-content: center;
        margin: 40px 0;
        font-size: 20px;
        color: #fff;
    }
    
    .del_model_box .del_content .del_choose {
        display: flex;
        justify-content: space-between;   
    }

    .del_model_box .del_content .del_choose .del_cancel {
        margin: 10px 30px ;
        color: rgb(29, 107, 44);
        background-color: rgb(25,200,58);
        border: 1px solid rgb(29, 107, 44);
    }

    .del_model_box .del_content .del_choose .del_cancel:hover {
        color: #9ae46f;
        background-color: rgb(30, 134, 51);
    }
    
    .del_model_box .del_content .del_choose .del_delete {
        margin: 10px 30px ;
        color: rgb(163, 49, 49);
        background-color: rgb(222, 84, 84);
        border: 1px solid rgb(50, 48, 48);
    }

    .del_model_box .del_content .del_choose .del_delete:hover {
        color: #e48080;
        background-color: rgb(163, 49, 49);
    }
    
    .container {
        width: 100%;
        height: 100vh;
        /* background-color: rgb(47, 45, 45); */
    }

    .container .buttons {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        margin-right: 10px;
    }

    .container .buttons .del {
        margin: 0 20px;
        color: rgb(163, 49, 49);
        background-color: rgb(222, 84, 84);
        border: 1px solid rgb(50, 48, 48);
    }

    .container .buttons .del:hover {
        color: #e48080;
        background-color: rgb(163, 49, 49);
    }

    .container .buttons .add {
        color: rgb(29, 107, 44);
        background-color: rgb(25,200,58);
        border: 1px solid rgb(29, 107, 44);
    }

    .container .buttons .add:hover {
        color: #9ae46f;
        background-color: rgb(30, 134, 51);
    }    
    

    .container .container_in {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgb(183, 127, 127);
    }

    .container .container_in .wordArea {
        font-size: 6rem;
        margin-top: 10rem;
        margin-bottom: 8rem;
    }

    .container .container_in .chooseArea {
        display: flex;
        flex-direction: column;    
    }

    .container .container_in .chooseArea .select {
        width: 20rem;
        height: 5rem;
        border-radius: 3em;
        background-color: rgb(183, 127, 127);
        /* background-color: rgb(143, 13, 13); */
        /* background-color: rgb(28, 121, 24); */
        margin-bottom: 2rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.5rem;
        color: #ffffff;
        border: 1px solid rgb(185, 127, 127);
    }

    .container .container_in .chooseArea .select:hover {
        background-color: rgb(220, 90, 90);
    }

</style>
<body>
    

    <div class="container">
        <div class="optionButton">
            <div class="buttons">
                <button id="del" class="del">Del</button>
                <button id="add" class="add">Add</button>
            </div>
        </div>
    
        <div class="container_in">
            <div class="wordArea">
                AaBbCc
            </div>
            
            <div class="chooseArea">
                <button class="select" data-index="0">选项1</button>
                <button class="select" data-index="1">选项2</button>
                <button class="select" data-index="2">选项3</button>
            </div>
        </div>
    </div>
  
    <!-- 添加单词信息 -->
    <div class="add_model_box">
        <div class="content">
            <div class="title">
                <i class="close">x</i>
            </div>
            <form id="addWordFrom" action="#">
                <div class="form_inputWord">
                    <input type="text" id="inputWord" placeholder="input word">
                </div>
                <div class="sameStyle">
                    <div class="form_input_translate">
                        <input type="text" id="inputTranslate" placeholder="input Translate">
                    </div>
                    <div class="form_input_type">
                        <select name="selectType" id="selectType">
                            <option value="default" disabled selected >input type</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <!-- .......接口拿数据...... -->
                        </select>
                    </div>
                </div>
                <div class="form_input_detail">
                    <input type="area" placeholder="input detail">
                </div>
                <div class="form_input">
                    <button>SAVE</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 删除单词信息 -->
    <div class="del_model_box">
        <div class="del_content">
            <div class="del_title">
                <i class="del_close">x</i>
            </div>
            <div class="del_prompt">
                <p>Are you sure you want to delete it?</p>
            </div>
            <div class="del_choose">
                <button class="del_cancel">cancel</button>
                <button class="del_delete">delete</button>
            </div>
        </div>
    </div>
    

</body>
<script>
    var id;
    var chooseArr = [];

    $(document).ready(()=>{
        // 将题目和选项都展示在屏幕上
        getNum(function(wordNum){
            id = Math.floor(Math.random() * wordNum) + 1;
            getWord(id);
            chooseArr = getChoose(id);
        })

    })
    

    window.addEventListener("load",() =>{
        // 获取add按钮
        const add = document.querySelector(".add");
        // 获取del按钮
        const del = document.querySelector(".del");
        // 获取add模态框
        const fillAdd = document.querySelector(".add_model_box");
        // 获取add表单
        const addWordFrom = document.getElementById("addWordFrom");
        // 获取del模态框
        const fillDel = document.querySelector(".del_model_box");
        // 获取add关闭
        const addClose = document.querySelector(".close");
        // 获取del关闭
        const delClose = document.querySelector(".del_close");
        // 获取del中的cancel
        const delCancel = document.querySelector(".del_cancel");
        // console.info(delCancel)


        // 分别做打开和关闭
        add.addEventListener("click",() => {
            fillAdd.style.display = "block";
        })
        addClose.addEventListener("click",() => {
            fillAdd.style.display = "none";
            addWordFrom.reset();
        })
        del.addEventListener("click",() => {
            fillDel.style.display = "block";
        })
        delClose.addEventListener("click", ()=>{
            fillDel.style.display = "none";
        })
        delCancel.addEventListener("click",() =>{
            fillDel.style.display = "none";
        })
        
    
        
    })

    function local() {
        http = "http://"
        ip = "127.0.0.1";
        port = "8080"
        return  http+ip+":"+port;
    }


    // 获取单词数量
    function getNum(callback) {
        $.ajax({
            url: local()+"/word/getCount",
            // url:"",
            type: "get",
            data: {},
            dataType: "json",
            success: function (res) {
                callback(res.data)
            }
        });
    }
    
    
    // 获取单词
    function getWord (id) {
        $.ajax({
            url: local() +"/word/getEn",
            type: "get",
            data:{id},
            dataType:"json",
            success: function(res) {
                console.info(res.data);
                $(".wordArea").text(res.data);
            }
        });
    }

    // 获取选项
    function getChoose(id) {
        var chooseIdArr = [];
        
        function getC(callback) {
            $.ajax({
                url: local()+"/word/getChoose",
                type: "get",
                data: {id},
                dataType:"json",
                success: function(res) {
                    callback(res.data);
                }
            });
        }
        getC(function(chooses) {
            $.each(chooses,function(index,value) {
                chooseIdArr.push(value.id);
                $(".select").eq(index).text(value.type+" "+value.ch);
            })
        })
        
        return chooseIdArr;
    }
    
    // 检查答案是否正确
    function checkAnswer(exactId,chooseId) {
        var result = false;
        
        $.ajax({
            url: local() + "/word/checkAnswer",
            type:"get",
            data: {
                exactId,
                chooseId
            },
            dataType:"json",
            success: function(res) {
                result= res.data;
            },
            async: false
            
        });
        return result
    }

    
    $(".select").on("click",function () {
        const index =  $(this).data('index');
        console.info(id);
        console.info(chooseArr[index]);
        const flag = checkAnswer(id,chooseArr[index]);
        console.info(flag);
        if (flag) {
            $(`.select[data-index="${index}"]`).css("background", "rgb(28, 121, 24)");
        } else {
            $(`.select[data-index="${index}"]`).css("background", "rgb(143, 13, 13)");
        }
        

        setTimeout(function() {
            $(".select").css("background", "rgb(183, 127, 127)");
            getNum(function(wordNum){
                id = Math.floor(Math.random() * wordNum) + 1;
                getWord(id);
                chooseArr = getChoose(id);
        })
        }, 1000);
    })

    
    
    
</script>
</html>